<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>学生列表</title>

    <!-- js片段 -->
    <!-- jquery文件 -->
    <script src="/plugins/jquery-3.7.1.min.js"></script>

    <!-- css片段 -->
    <!-- 1.最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 2.bootstraptable文件 -->
    <link rel="stylesheet" href="/plugins/bootstrapTable/bootstrap-table.min.css">

    <!-- 3.自己的css文件 -->
    <link rel="stylesheet" href="/css/list.css">



</head>

<body>
<!-- 查询 -->
<form id="form">
    <div class="form-group">
        <input type="text" class="form-control" id="InputName" placeholder="课程编号">
        <button type="button" class="btn btn-success" onclick="searchStudent()">提交</button>
        <a href="#" class="btn btn-success" onclick="reload()">刷新</a>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"  id="addButton" onclick="insertSetOption()">
            新增学生成绩信息
        </button>
    </div>
</form>


<!-- 设计表格 -->
<table class="table table-striped" id="teachers">

</table>


<!-- 新增学生信息表单 -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">学生信息</h4>
            </div>
            <div class="modal-body">
                <form id="formGrade">
                    <input hidden="hidden" id="id" name="id">
                    <div class="form-group">
                        <label for="cno">课程名称</label>
                        <select class="form-control" id="cno" name="cno"></select>
                    </div>
                    <div class="form-group">
                        <label for="sno">学号:</label>
                        <input type="text" class="form-control" id="sno" name="sno" placeholder="Sno">
                    </div>
                    <div class="form-group">
                        <label for="grade">成绩:</label>
                        <input type="text" class="form-control" id="grade" name="grade" placeholder="Grade">
                    </div>
                    <div class="modal-footer" id="buttons">
                        <button type="submit" class="btn btn-primary"  id="saveButton" onclick="insertInfo()">保存</button>
                    </div>
                </form>

            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- js片段 -->
<!-- 1.自己写的list.js文件 -->
<script type="text/javascript" src="/js/teacher/grade.js"></script>
<!-- 2.最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!-- 3.bootstraptable文件 -->
<script src="/plugins/bootstrapTable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstrapTable/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- 4.jqvalidate文件 -->
<script src="/plugins/jqvalidate/jquery.validate.min.js"></script>
<script src="/plugins/jqvalidate/localization/messages_zh.min.js"></script>
<!-- 5.自己写的js -->
<script>
    // 查询该课程的学生成绩信息
    function searchStudent() {
        var content = document.getElementById("InputName").value;
        $("#teachers").bootstrapTable('refresh', {url: "/webapi/teacher/searchGrade/"+ content});
    }

    function deleteInfo(cno, sno){
        if (confirm("是否真的要删除!")){
            $.ajax({
                url: "/webapi/teacher/deleteGrade/"+cno+"&"+sno,
                method: "delete",
            }).done(function (){
                reload();
            })
        }
    }
    function showInfo(cno, cname, sno, grade){
        $("#cno").html("<option value=" + cno + ">" + cname + "</option>")
        $("#sno").val(sno);
        $("#grade").val(grade);
        var element = document.getElementById("saveButton");
        element.setAttribute("onclick", "updateInfo()");
    }

    function updateInfo(){
        console.log($("#cno").val())
        $.ajax({
            url: "/webapi/teacher/updateGrade/"+ $("#cno").val() +"&"+$("#sno").val()+"&"+$("#grade").val(),
            method: "post",
        }).done(function (){
            reload();
            $('#myModal').modal('hide')
        })
    }

    function insertInfo(){
        $.ajax({
            url: "/webapi/teacher/insertGrade/" + $("#cno").val() +"&"+$("#sno").val()+"&"+$("#grade").val(),
            method: "post",
        }).done(function (){
            reload();
            $('#myModal').modal('hide')
        })
    }

    $("#addButton").click(function() {
        $("#formGrade").validate().resetForm();
        $("#formGrade")[0].reset();
    });

</script>
</body>




